<template>
	<view class="title">注册</view>
	<view class="ipt">
		<input type="text" v-model="firstName" placeholder="请填入姓氏" />
	</view>
	<view class="ipt">
		<input type="text" v-model="lastName" placeholder="请填入名字" />
	</view>
	<view class="ipt">
		<input type="text" style="width: 500rpx" v-model="fname" placeholder="请填入父亲名字" />
	</view>
	<view class="ipt">
		<input type="idcard" v-model="idCard" placeholder="请填入身份证号" />
	</view>
	<view class="ipt">
		<input type="number" v-model="phone" placeholder="请填写手机号" />
	</view>
	<view class="ipt">
		<input type="text" v-model="code" placeholder="请填写验证码" />
		<view class="flex-center" @click="getyzm" v-if="time==0">获取验证码</view>
		<view class="flex-center" v-else><text>{{time}}s</text></view>
	</view>
	<view class="zc" @click="gologin"><text>已有账号, </text> 立即登录</view>
	<view class="flex-center login" @click="submit">注册查谱平台</view>

	<up-popup :round='10' :closeable='true' mode='bottom' :show="popShow" @close="popClose">
		<view class="boxbg">
			<view class="iptt">
				<up-search placeholder="请输入父亲名字,编号" :showAction='false' @change='getval' :clearabled="true"
					v-model="keyword"></up-search>
			</view>
			<scroll-view :scroll-y="true" class="listbg">
				<view class="listitem" v-for="(item,index) in list" :key="index" @click="setfname(item)">
					<text>NO:{{item.id}}</text>
					<text>{{item.name}}</text>
				</view>

			</scroll-view>
		</view>

	</up-popup>



</template>

<script setup>
	import {
		register,
		familyList,
		miniUserInfo
	} from "@/api/account.js"
	import {
		ref,
		onUnmounted,
	} from 'vue';
	import {
		onUnload,
		onHide
	} from '@dcloudio/uni-app';
	let popShow = ref(false)

	let firstName = ref('')
	let lastName = ref('')
	let fname = ref('')
	let idCard = ref('')
	let phone = ref('')
	let code = ref('')

	onUnload(() => {
		if (time60) {
			clearTimeout(time60);
			time60 = null;
		}
	})
	onHide(() => {
		if (time60) {
			clearTimeout(time60);
			time60 = null;
		}
	})



	/**
	 * 结束定时器
	 */
	let time60 = null
	let time = ref(0)

	function endInter() {
		clearInterval(time60)
	}

	// 点击获取验证码
	function getyzm() {
		if (!phone.value) {
			uni.showToast({
				title: "请输入手机号",
				icon: "none"
			})
			return
		}
		uni.showToast({
			title: "发送成功",
			icon: "none"
		})
		time.value = 60
		let i = 0
		time60 = setInterval(function() {
			i = i + 1
			time.value = time.value - 1
			if (time.value == 0) {
				clearInterval(time60)
			}
		}, 1000)
	}

	function submit() {

		if (firstName.value == '') {
			uni.showToast({
				title: '请输入姓氏',
				icon: 'none'
			})
			return false;
		}
		if (lastName.value == '') {
			uni.showToast({
				title: '请输入名字',
				icon: 'none'
			})
			return false;
		}

		if (fname.value == '') {
			uni.showToast({
				title: '请选择父亲姓名',
				icon: 'none'
			})
			return false;
		}
		if (idCard.value == '') {
			uni.showToast({
				title: '请输入身份证',
				icon: 'none'
			})
			return false;
		}
		if (!phone.value) {
			uni.showToast({
				title: "请输入手机号",
				icon: "none"
			})
			return
		}
		if (!code.value) {
			uni.showToast({
				title: "请输入验证码",
				icon: "none"
			})
			return
		}
		let data = {
			"firstName": firstName.value,
			"lastName": lastName.value,
			"idCard": idCard.value,
			"phone": phone.value,
			"code": code.value,
			"type": 0,
			"fname": fname.value,
		}
		uni.showLoading({
			mask: true
		})
		register(data).then(res => {
			uni.hideLoading()
			uni.redirectTo({
				url: "/pages/login/login"
			})
		})
	}

	function setfname(e) {
		fname.value = e.id + '-' + e.name
		popClose()

	}


	function gologin() {
		uni.navigateTo({
			url: "/pages/login/login"
		})
	}
	let keyword = ref('')

	let list = ref([])

	function popClose(e) {
		popShow.value = false
		keyword.value = ''
		list.value = []
	}

	function getval(e) {
		if (e) {
			familyList({
				keyword: e,
				parent: false
			}).then(res => {
				list.value = res.data
			})
		}
	}
</script>

<style lang="scss" scoped>
	.boxbg {
		width: 100%;
		height: 1000rpx;
		border-radius: 15rpx;
		box-sizing: border-box;
		padding: 100rpx 50rpx;

		.iptt {
			width: 650rpx;
		}

		.listbg {
			margin-top: 60rpx;
			width: 650rpx;
			height: 700rpx;

			.listitem {
				width: 650rpx;
				height: 96rpx;
				border-bottom: 1rpx solid #ddd;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 28rpx;
			}
		}
	}


	page {
		background-image: url('@/static/bgimg.png');
		background-size: 100% 100%;
	}

	.login {
		margin-top: 120rpx;
		width: 670rpx;
		height: 100rpx;
		background: #C7A46F;
		border-radius: 50rpx 50rpx 50rpx 50rpx;
		font-family: PingFang-SC, PingFang-SC;
		font-weight: 500;
		font-size: 32rpx;
		margin-left: 40rpx;
		color: #FFFFFF;
	}

	.title {
		font-family: PingFang-SC, PingFang-SC;
		font-weight: 500;
		font-size: 60rpx;
		color: #262626;
		margin: 0 40rpx;
		margin-bottom: 64rpx;
		padding-top: 40rpx;
	}

	.zc {
		width: 650rpx;
		margin-left: 40rpx;
		text-align: right;
		font-family: PingFang-SC, PingFang-SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #C7A46F;

		text {
			color: #AAAAAA;
		}

	}

	.ipt {
		width: 670rpx;
		height: 100rpx;
		background: #FFFFFF;
		border-radius: 50rpx 50rpx 50rpx 50rpx;
		margin-left: 40rpx;
		margin-bottom: 40rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		input {
			margin-left: 40rpx;
			font-family: PingFang-SC, PingFang-SC;
			font-weight: 500;
			font-size: 28rpx;
			width: 380rpx;
		}

		&>view {
			width: 230rpx;
			height: 100rpx;
			background: #C7A46F;
			border-radius: 50rpx 50rpx 50rpx 50rpx;
			font-family: PingFang-SC, PingFang-SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #FFFFFF;
		}
	}
</style>